<template>
  <div class="orderTest-container">
    <div class="bigTitle" style="text-align:left">
      CONTACT WITH ME
    </div>
    <div class="content">
      <div class="form">
        <div class="in">
          <input type="text" v-model="form.name" placeholder="姓名" />
        </div>
        <div class="in">
          <input type="text" v-model="form.phone" placeholder="微信或电话" />
        </div>
        <div class="in">
          <textarea
            rows="3"
            v-model="form.content"
            type="text"
            placeholder="信息"
          />
        </div>
        <div class="in" style="margin-top: 40px;">
          <my-button :showBg="true" @click="handleSubmit">提交</my-button>
        </div>
      </div>
      <div class="img">
        <img src="@/assets/email.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
  import { sendEmail } from "@/api/sendemail";
  export default {
    name: "ContactC",
    components: {},
    data() {
      return {
        form: {
          name: "",
          phone: "",
          content: "",
        },
      };
    },
    created() {},
    mounted() {},
    computed: {},
    watch: {},
    methods: {
      handleSubmit() {
        if (this.form.name && this.form.phone && this.form.content) {
          let ot = window.localStorage.getItem("t");
          if (ot) {
            let now = new Date().getTime();
            if (now - ot < 10000) {
              this.$message.error("发送太快了,休息一下.");
              return false;
            } else {
              sendEmail(this.form).then((res) => {
                console.log("da", res.data);
                if (res.data.code == 200) {
                  this.$message.success("发送成功");
                  let t = new Date().getTime();
                  window.localStorage.setItem("t", t);
                } else {
                  this.$message.error("发送失败");
                }
              });
            }
          } else {
            window.localStorage.setItem("t", new Date().getTime() - 10000);
            this.handleSubmit();
          }
        } else {
          this.$message.error("请写全表单");
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .bigTitle::before {
    left: 0;
    width: 200px;
  }
  input,
  textarea {
    width: 100%;
    border: none;
    outline: none;
    color: #707070;
    background-color: transparent;
    position: relative;
  }
  .img {
    margin-bottom: 15px;
    width: 40%;
    img {
      width: 100%;
    }
  }
  .content {
    @include flex;
    align-items: center;
    justify-content: space-between;
  }
  .form {
    width: 50%;
  }

  .in {
    input {
      line-height: 30px;
    }
    margin: 30px 0;
  }
  @media screen and (max-width: 1024px) {
    .content {
      justify-content: space-between;
      flex-direction: column-reverse;
    }
    .form {
      width: 100%;
    }
    .img {
      text-align: center;
    }
  }
  @media screen and (max-width: 500px) {
    .img {
      text-align: center;
      img {
        width: 100%;
      }
    }
  }
</style>
